{% stylesheet %}
.block_facebook .block_title {
    margin-bottom: 0;
}

.block_facebook .block_facebook_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.block_facebook .block_facebook_left {
    width: calc(100% - 500px);
    padding: 0 100px 0 0;
    box-sizing: border-box;
}

.block_facebook .block_facebook_right {
    width: 500px;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
}

.block_facebook .block_facebook_content_style {
    flex-direction: row-reverse;
}

.block_facebook .block_facebook_content_style .block_facebook_left {
    padding: 0 0 0 100px;
}

@media (max-width: 768px) {

    .block_facebook .block_facebook_content_style,
    .block_facebook .block_facebook_content {
        flex-direction: column;
    }

    .block_facebook .block_facebook_content_style .block_facebook_left,
    .block_facebook .block_facebook_left {
        padding: 0;
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }
}
@media (max-width: 768px) {
    .block_facebook .block_facebook_right {
        width: 480px;

    }
}
@media (max-width: 767px) {
    .block_facebook .block_facebook_right {
        width: 100%;

    }
}
{% endstylesheet %}
<div class="block_facebook">
    <div class="container_wrapper">
        <div class="block_facebook_content {% if section.settings.position == '2' %}block_facebook_content_style{% endif %}">
            <div class="block_facebook_left">
                {% if section.settings.title != '' or section.settings.detail != '' %}
                <div class="block_title">
                    {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
                    {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
                </div>
                {% endif %}
            </div>
           {% assign name = section.settings.tab | join: "," %}

            <div class="block_facebook_right">
                <iframe id="facebook_iframe" style="width:100%;border:none;overflow:hidden;height: {{ section.settings.height }}px;" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
    const width = $('.block_facebook_right').width();
    const facebook_url = "https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F{{ section.settings.account }}%2F&tabs={{ name | escape }}&width="+width+"&height={{ section.settings.height }}&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    $('#facebook_iframe').attr('src',facebook_url)
})
</script>
{% schema %}
{
  "tag": "section",
  "class": "block_facebook",
  "is_global": false,
  "name": {
    "zh_CN": "Facebook"
  },
  "max_blocks": "",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题"
      },
      "placeholder": {
        "zh_CN": "请输入标题"
      },
      "default": "Facebook"
    },
    {
      "type": "card_text_editor",
      "id": "detail",
      "label": {
        "zh_CN": "简短描述"
      },
      "placeholder": {
        "zh_CN": "请输入描述"
      },
      "default": "With the public homepage plugin, you can easily embed and promote any public Facebook homepage on your website. Just like on Facebook, your visitors can like and share the homepage on the site."
    },
    {
      "type": "card_input",
      "id": "account",
      "label": {
        "zh_CN": "账号"
      },
      "placeholder": {
        "zh_CN": "请输入账号,如XXXXX"
      },
      "info":{
        "zh_CN": "Facebook 公共主页账号，例如: https://www.facebook.com/XXXXX"
      }
    },
    {
      "type": "card_checkbox",
      "id": "tab",
      "label": {
        "zh_CN": "选项卡"
      },
      "option": [
        {
          "label": {
            "zh_CN": "时间线"
          },
          "value": "timeline"
        },
        {
          "label": {
            "zh_CN": "活动"
          },
          "value": "events"
        },
        {
          "label": {
            "zh_CN": "消息"
          },
          "value": "messages"
        }
      ],
      "default": [
        "timeline",
        "events",
        "messages"
      ]
    },
    {
      "type": "card_input_number",
      "label": {
        "zh_CN": "高度"
      },
      "default": "500",
      "id": "height"
    },
    {
      "type": "card_select",
      "id": "position",
      "label": {
        "zh_CN": "描述位置"
      },
      "option": [
        {
          "label": {
            "zh_CN": "居左"
          },
          "value": "1"
        },
        {
          "label": {
            "zh_CN": "居右"
          },
          "value": "2"
        }
      ],
      "default": "2"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "title": "Facebook",
      "detail": "With the public homepage plugin, you can easily embed and promote any public Facebook homepage on your website. Just like on Facebook, your visitors can like and share the homepage on the site.",
      "account": "",
      "tab": [
        "timeline",
        "events",
        "messages"
      ],
      "height": "500",
      "position": "2"
    },
    "blocks": []
  }
}
{% endschema %}